<template>
	<view>
		<view class="myhome">
			<!-- 已登录 -->
			<view v-if="wxlogin" class="wx-name">
				<view>
					<image :src="loginData.avatarUrl"></image>
				</view>
				<view class="wx-text">
					<text>{{loginData.nickName}}</text>
				</view>
			</view>
			<!-- </block> -->
			<!-- 未登录 -->
			<view v-if="!wxlogin" class="wx-button">
				<view class="wx-button-view">登录美团外卖，开启吃货旅程</view>
				<view>
					<button plain="true" @click="handleLogin">去登录</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		Login
	} from '@/login/login.js'
	export default {
		data() {
			return {
				wxlogin: false,
				loginData: {}
			}
		},
		onShow() {
			this.isLogin()
		},
		methods: {
			handleLogin() {
				uni.getUserProfile({
					desc: 'weixin',
					success: async (infoRes) => {
						// console.log( infoRes.userInfo);
						let loginClass = new Login(infoRes.userInfo)
						await loginClass.go()
						this.isLogin()
					}
				});

			},
			
			// 是否已登录

			isLogin() {
				let getdata = uni.getStorageSync('login')
				if (!getdata) {
					this.wxlogin = false
				} else {
					this.wxlogin = true
					this.loginData = getdata
				}
			}
		},

	}
</script>

<style scoped>
	.myhome {
		background: linear-gradient(to top, #ffe566 10%, #ffd300 100%);
		height: 350upx;
		display: flex;
		align-items: center;
	}

	.wx-name image {
		width: 120upx !important;
		height: 120upx !important;
		border-radius: 50%;
		margin-right: 20upx;
		border: 10rpx solid #999999;
	}

	text {
		display: block;
		margin: 10upx 0;
		color: #999999;
	}

	.wx-name {
		display: flex;
		align-items: center;
		padding: 0 30upx;
		align-content: center;
		height: 200upx;
	}

	.wx-text text {
		font-size: 35upx;
	}

	/* 登录 */
	.wx-button button {
		border: none;
		font-size: 30upx;
		background: linear-gradient(to right, #28a6f1 10%, #0e8dd7 80%);
		border-radius: 50upx;
		color: #FFFFFF;
	}

	.wx-button-view {
		font-size: 35upx;
		color: #FFFFFF;
		margin-bottom: 25upx;
	}

	.wx-button {
		margin: 0 auto;
	}
</style>
